vue2.0的完整安装步骤和项目的创建过程

您所在的位置:网站首页 vue 多入口配置 vue2.0的完整安装步骤和项目的创建过程

vue2.0的完整安装步骤和项目的创建过程

#vue2.0的完整安装步骤和项目的创建过程| 来源: 网络整理| 查看: 265

vue2.0的完整安装步骤

vue版本:2.2.2

vue有两种项目创建方式,一种是下载vue.js,通过script标签引入即可;另一种通过vue-cli构建基于webpack的项目,这种项目构建发布需要部署node环境,不能以文件的方式直接打开。

1.全局安装vue命令行工具npm install -g vue-cli  (首次需要安装vue-cli 后面就不需要了)2.创建一个基于webpack模板的新项目vue init webpack my-project注:跟“npm init”类似,输入一系列项目描述与配置,可以不用配置ESLint和单元测试框架。3.项目创建完成后再安装基础模块cd my-projectnpm install注:第一次安装了单元测试框架,结果安装到27%就安装不下去了,然后显示失败。第二次我把单元测试框架也去掉了,很快便安装完了。4.安装完成后运行该项目即可。npm run dev项目监听在8080端口,出现页面即为成功。

下图为安装ESLint和单元测试框架后的文件结构.|-- build                            // 项目构建相关代码|   |-- build.js                     // 生产环境构建代码|   |-- check-version.js             // 检查 node、npm 等版本|   |-- dev-client.js                // 热重载相关|   |-- dev-server.js                // 构建本地服务器|   |-- utils.js                     // 构建工具相关|   |-- webpack.base.conf.js         // webpack 基础配置(出入口和 loader)|   |-- webpack.dev.conf.js         // webpack 开发环境配置|   |-- webpack.prod.conf.js         // webpack 生产环境配置|-- config                           // 项目开发环境配置|   |-- dev.env.js                   // 开发环境变量|   |-- index.js                     // 项目一些配置变量(开发环境接口转发将在此配置)|   |-- prod.env.js                 // 生产环境变量|   |-- test.env.js                 // 测试环境变量|-- src                              // 源码目录|   |-- components                   // vue 公共组件|   |-- store                        // vuex 的状态管理|   |-- App.vue                      // 页面入口文件|   |-- main.js                      // 程序入口文件,加载各种公共组件|-- static                           // 静态文件,比如一些图片,json数据等|-- test                             // 自动化测试相关文件|-- .babelrc                         // ES6语法编译配置|-- .editorconfig                    // 定义代码格式|-- .eslintignore                    // ESLint 检查忽略的文件|-- .eslistrc.js                     // ESLint 文件,如需更改规则则在此文件添加|-- .gitignore                       // git 上传需要忽略的文件|-- README.md                        // 项目说明|-- index.html                       // 入口页面|-- package.json                     // 项目基本信息.

当项目需要发布时,执行 npm run build命令来打包项目,打包后的存放在dist文件夹下。dist下的页面不能以文件的方式打开,需要通过发布后才能访问。

ps:第一次打包后,启动服务运行结果发现找不到相关的js和css,检查后发现dist前面多了一条“/”,所以需要在config/index.js里修改

将assetsPublicPath的值设为‘’;



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3